<template>
  <div class="control-energy-efficiency">
    <div class="chart" id="controlEnergyEfficiency"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'ControlEnergyEfficiency',
  methods:{
    initChart(){
      const chart=echarts.init(document.getElementById('controlEnergyEfficiency'))
      const option={
        color:['#FAAD14','#00C6FF','#58D41B'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '管控能效统计',
            type: 'pie',
            center:['50%','40%'],
            radius: ['30%','70%'],
            itemStyle:{
              borderRadius: 5
            },
            label: {
              show: true,
              color: '#32B4FF',
              formatter: '{b}: {d}%'
            },
            labelLine: {
              show: true
            },
            data: [
              {name:'民警处置',value:45},
              {name:'网格员处置',value:22},
              {name:'智能系统拦截',value:33}
            ]
          }
        ]
      }
      chart.setOption(option)
    }
  },
  mounted(){
    this.initChart()
  }
}
</script>
<style scoped lang="scss">
.control-energy-efficiency{
  width: 100%;
  height: 100%;
  .chart{
    width: 100%;
    height: 100%;
  }
}
</style>
